<template>
  <view class="mark" :class="theme">
    {{ text }}
  </view>
</template>

<script>
export default {
  props: {
    theme: {
      type: String,
      default: 'red',
    },
    text: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss">
.mark {
  height: 40upx;
  border-radius: 20upx;
  font-weight: 400;
  font-size: 24upx;
  padding: 0 14upx;
  line-height: 36upx;
  font-family: PingFangSC-Regular, PingFang SC;
  display: inline-block;
  &.red {
    border: 2upx solid rgba(243, 211, 211, 1);
    background: rgba(254, 245, 245, 1);
    color: rgba(218, 38, 38, 1);
  }
  &.gray {
    background: rgba(237, 242, 246, 1);
    border: 2upx solid rgba(210, 221, 230, 1);
    color: rgba(113, 128, 137, 1);
  }
}
</style>
